<template>
  <div>
    <el-form ref="receiveOrPayQueryForm" :model="receiveOrPayQueryData" :rules="receiveOrPayQueryRules"
             size="mini" label-width="65px">
      <el-row :gutter="20">
        <el-col :span="1">
          <el-tag>费用</el-tag>
        </el-col>
        <el-col :span="5">
          <el-form-item label="费用客户" prop="receiveCustomerId">
            <el-select v-model="receiveOrPayQueryData.receiveCustomerId" placeholder="请输入关键字搜索" multiple clearable filterable remote :remote-method="remoteCustomer"
                       :style="{width: '100%'}">
              <el-option v-for="item in customerIdOptions" :key="item.id" :label="item.text" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务商" prop="payServicerId" style="margin-bottom: 0px;">
            <el-select v-model="receiveOrPayQueryData.payServicerId" placeholder="请输入关键字搜索" multiple clearable filterable remote :remote-method="remoteServicerCompany"
                       :style="{width: '100%'}">
              <el-option v-for="item in serviceCompanyOptions" :key="item.id" :label="item.text" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="费用名称" prop="costNames">
            <el-select v-model="receiveOrPayQueryData.costNames" placeholder="请选择费用名称" multiple clearable filterable
                       :style="{width: '100%'}">
              <el-option v-for="(item, value) in statementSource.payNameMap" :key="value" :label="item" :value="value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="费用类型" prop="payType" style="margin-bottom: 0px;">
            <el-select v-model="receiveOrPayQueryData.payType" placeholder="请选择费用类型" clearable
                       :style="{width: '100%'}">
              <el-option v-for="(item, value) in statementSource.payTypeMap" :key="value" :label="item" :value="value"></el-option>
            </el-select>
          </el-form-item>

        </el-col>
        <el-col :span="7">
          <el-row>
            <el-col :span="13">
              <el-form-item label="费用日期" prop="rangeAccountDate">
                <el-date-picker v-model="receiveOrPayQueryData.rangeAccountDate[0]" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                :style="{width: '100%'}" placeholder="开始日期" clearable></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="-" prop="rangeAccountTime" label-width="30px">
                <el-date-picker v-model="receiveOrPayQueryData.rangeAccountDate[1]" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                :style="{width: '100%'}" placeholder="结束日期" clearable></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="币种" prop="currency" style="margin-bottom: 0px;">
            <el-select v-model="receiveOrPayQueryData.currencys" placeholder="请选择币种" multiple clearable filterable
                       :style="{width: '100%'}">
              <el-option v-for="(item, value) in statementSource.currencyMap" :key="value" :label="item" :value="value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="服务商类型" prop="currency" style="margin-bottom: 0px;" label-width="75px">
            <el-select v-model="receiveOrPayQueryData.serveCompanyType" placeholder="请选择服务商类型"  clearable filterable
                       :style="{width: '100%'}">
              <el-option v-for="(item, value) in statementSource.serviceCompanyTypeMap" :key="value" :label="m(item)" :value="value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  import { ajax } from "@/store/yg/common/utils";
  import { m } from "@/store/yg/common/local";
  export default {
    components: {},
    props: {
      statementSource:{
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    data() {
      return {
        receiveOrPayQueryData: {
          receiveCustomerId: [],
          payServicerId: [],
          costNames: [],
          currencys:[],
          rangeAccountDate: [],
          payType: null,
          serveCompanyType: null,
        },
        receiveOrPayQueryRules: {
        },
        customerIdOptions: [],
        serviceCompanyOptions: [],
        costNamesOptions: [],
        payTypeOptions: [],

      }
    },
    mounted() {},
    methods: {
      m(params) {
        return m(params)
      },
      async remoteCustomer(query){
        if (query !== '') {
          this.customerIdOptions = await ajax("searchCustomerSelect", {
            name: query
          });
        }else {
          this.customerIdOptions = {};
        }
      },
      async remoteServicerCompany(query){
        if (query !== '') {
          this.serviceCompanyOptions = await ajax("searchServiceCompanySelect", {
            name: query
          });
        }else {
          this.serviceCompanyOptions = {};
        }
      }
    }
  }

</script>
<style>
</style>
